<template>
  <layout title="tabbar底部导航栏">
    <layout-content title="基础使用">
      <tn-tabbar
        v-model="currentTabbarIndex"
        :data="normalTabbar"
        :fixed="false"
      ></tn-tabbar>
    </layout-content>

    <layout-content title="图片图标">
      <view style="height: 50rpx;"></view>
      <tn-tabbar
        v-model="currentTabbarIndex"
        :data="imageTabbar"
        :fixed="false"
      ></tn-tabbar>
    </layout-content>

    <layout-content title="自定义颜色">
      <tn-tabbar
        v-model="currentTabbarIndex"
        :data="normalTabbar"
        bg-color="tn-bg-blue--light"
        color="tn-color-grey"
        active-color="tn-color-blue"
        :fixed="false"
      ></tn-tabbar>
      <view class="tn-margin-top">
        <tn-tabbar
          v-model="currentTabbarIndex"
          :data="normalTabbar"
          bg-color="#D6F4FA"
          color="#838383"
          active-color="#31C9E8"
          :fixed="false"
        ></tn-tabbar>
      </view>
      <view class="tn-margin-top">
        <tn-tabbar
          v-model="currentTabbarIndex"
          :data="colorTabbar"
          :fixed="false"
        ></tn-tabbar>
      </view>
    </layout-content>

    <layout-content title="自定义大小">
      <tn-tabbar
        v-model="currentTabbarIndex"
        :data="normalTabbar"
        height="110rpx"
        font-size="28rpx"
        icon-size="46rpx"
        :fixed="false"
      ></tn-tabbar>
    </layout-content>

    <layout-content title="隐藏阴影">
      <tn-tabbar
        v-model="currentTabbarIndex"
        :data="normalTabbar"
        :shadow="false"
        :fixed="false"
      ></tn-tabbar>
    </layout-content>

    <layout-content title="带凸起按钮">
      <view style="height: 50rpx;"></view>
      <tn-tabbar
        v-model="currentTabbarIndex"
        :data="bulgeTabbar"
        :fixed="false"
      ></tn-tabbar>
    </layout-content>

    <layout-content title="点击动画">
      <tn-tabbar
        v-model="currentTabbarIndex"
        :data="normalTabbar"
        animation
        :fixed="false"
      ></tn-tabbar>
      <view class="tn-full-width" style="margin-top: 60rpx;">
        <tn-tabbar
          v-model="currentTabbarIndex"
          :data="bulgeTabbar"
          animation
          :fixed="false"
        ></tn-tabbar>
      </view>
    </layout-content>

    <layout-content title="切换拦截">
      <tn-tabbar
        v-model="currentTabbarIndex"
        :data="normalTabbar"
        :fixed="false"
        :before-switch="handleBeforeSwitchEvent"
      ></tn-tabbar>
    </layout-content>

    <layout-content title="毛玻璃效果">
      <tn-tabbar
        v-model="currentTabbarIndex"
        :data="normalTabbar"
        frosted-glass
        frosted-glass-color="rgba(1, 190, 255, 0.1)"
        :fixed="false"
      ></tn-tabbar>
    </layout-content>

    <layout-content title="底部固定">
      <view style="height: 130rpx;"></view>
    </layout-content>

  </layout>

  <tn-tabbar
    v-model="currentTabbarIndex"
    :data="normalTabbar"
    frosted-glass
    fixed
  ></tn-tabbar>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab z-index="99999" @click="handleDocFabClick"/>

  <tn-toast ref="toast" z-index="99999"></tn-toast>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnTabbar from '@/tuniao-ui/components/tn-tabbar/src/Tabbar.vue'
import {
  TabbarItem
} from '@/tuniao-ui/types'
import TnToast from '@/tuniao-ui/components/tn-toast/src/Toast.vue'
import {
  getRandom
} from '@/tuniao-ui/utils'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

const toast = ref<InstanceType<typeof TnToast>>()

// 普通导航栏配置
let currentTabbarIndex = ref<number>(0)
const normalTabbar = ref<TabbarItem[]>([
  {
    title: '首页',
    icon: 'home-smile',
    activeIcon: 'home-smile-fill'
  },
  {
    title: '分类',
    icon: 'discover-planet',
    activeIcon: 'discover-planet-fill'
  },
  {
    title: '消息',
    icon: 'message',
    activeIcon: 'message-fill'
  },
  {
    title: '购物车',
    icon: 'cart',
    activeIcon: 'cart-fill'
  },
  {
    title: '我的',
    icon: 'my',
    activeIcon: 'my-fill'
  }
])

const colorTabbar = ref<TabbarItem[]>([
  {
    title: '首页',
    icon: 'home-smile',
    activeIcon: 'home-smile-fill',
    color: '#EFEFEF',
    activeColor: '#E83A30'
  },
  {
    title: '分类',
    icon: 'discover-planet',
    activeIcon: 'discover-planet-fill',
    color: 'tn-color-blue--light',
    activeColor: 'tn-color-blue'
  },
  {
    title: '消息',
    icon: 'message',
    activeIcon: 'message-fill',
    activeColor: 'tn-color-indigo'
  },
  {
    title: '购物车',
    icon: 'cart',
    activeIcon: 'cart-fill',
    activeColor: 'tn-color-orange'
  },
  {
    title: '我的',
    icon: 'my',
    activeIcon: 'my-fill',
  }
])

const bulgeTabbar = ref<TabbarItem[]>([
  {
    title: '首页',
    icon: 'home-smile',
    activeIcon: 'home-smile-fill'
  },
  {
    title: '分类',
    icon: 'discover-planet',
    activeIcon: 'discover-planet-fill'
  },
  {
    title: '消息',
    icon: 'message',
    activeIcon: 'message-fill',
    bulge: true
  },
  {
    title: '购物车',
    icon: 'cart',
    activeIcon: 'cart-fill'
  },
  {
    title: '我的',
    icon: 'my',
    activeIcon: 'my-fill'
  }
])

// 图片图标导航
const imageTabbar = ref<TabbarItem[]>([
  {
    title: '首页',
    icon: 'https://vue3.tuniaokj.com/image/tabbar_icon/demo/home.png',
    activeIcon: 'https://vue3.tuniaokj.com/image/tabbar_icon/demo/home_s.png'
  },
  {
    title: '圈子',
    icon: 'https://vue3.tuniaokj.com/image/tabbar_icon/demo/circle.png',
    activeIcon: 'https://vue3.tuniaokj.com/image/tabbar_icon/demo/circle_s.png'
  },
  {
    title: '消息',
    icon: 'message',
    activeIcon: 'message-fill'
  },
  {
    title: '案例',
    icon: 'https://vue3.tuniaokj.com/image/tabbar_icon/demo/preferred.png',
    activeIcon: 'https://vue3.tuniaokj.com/image/tabbar_icon/demo/preferred_s.png'
  },
  {
    title: '我的',
    icon: 'https://vue3.tuniaokj.com/image/tabbar_icon/demo/mine.png',
    activeIcon: 'https://vue3.tuniaokj.com/image/tabbar_icon/demo/mine_s.png'
  }
])


// 切换前触发回调
const handleBeforeSwitchEvent = () => {
  const value: number = getRandom(1, 10)
  if (value > 5) {
    toast.value?.show({
      title: '切换成功'
    })
    return true
  } else {
    toast.value?.show({
      title: '切换拦截'
    })
    return false
  }
}
</script>

<style lang="scss" scoped>
</style>
